<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<!--引入本地 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>


		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>
		<title>发票申请</title>
	</head>
	<body>
		<div id="app">
			<div class="contaiiner">
				<div>
					<div class="title">
						购方信息
					</div>
					<div class="formF">
						<div class="formF-radio">
							<el-radio v-model="radio" label="1">个人</el-radio>
							<el-radio v-model="radio" label="2">企业</el-radio>
						</div>
						<div>
							<el-input v-model="form.ttmc" placeholder="请输入抬头名称"></el-input>
						</div>
						<div v-if="radio == 1" >
							<el-input v-model="form.sh" placeholder="请输入身份证号"></el-input>
						</div>

						<div v-if="radio == 2" >
							<el-input v-model="form.sh" placeholder="请输入单位税号"></el-input>
						</div>
						<div v-if="radio == 2" >
							<el-input v-model="form.dz" placeholder="请输入单位地址"></el-input>
						</div>

						<div v-if="radio == 2" >
							<el-input v-model="form.khx" placeholder="请输入开户行名称"></el-input>
						</div>
						<div v-if="radio == 2" >
							<el-input v-model="form.yxzh" placeholder="请输入开户行账号"></el-input>
						</div>
					</div>
				</div>
				<div>
					<div class="title">
						交付方式
					</div>
					<div class="formF">
						<div>
							<el-input v-model="form.dh" placeholder="请输入交付电话"></el-input>
						</div>
					</div>
				</div>
				<!-- 表格 -->

			</div>

			<div class="bottom-box">
				<div class="bottom">
					<div>
						<span>合计：</span>
						<span>{{parmsData.fee}}</span>
						<span>元</span>
					</div>
					<div class="btns">
						<button class="btn cancel" @click="back" >取消</button>
						<button class="btn" @click="submit" >确定</button>
					</div>
				</div>
			</div>

		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				radio: '1',
				form: {},
				parmsData :{}
			},
			created() {
				this.parmsData = getParams();
			},
			methods: {
				back(){
					window.location.href = "/admin/html/module/hetianjiangrun/html/children/tradeRecords.html";
				},
				async submit(){
					this.form.kplx = this.radio;
					let index = loading(this);
					this.form.ddbh = this.parmsData.ddbh;
					const res = await postWebCustom(getTableId("2745"),this.form);
					index.close();
					this.$message(res.msg);

				}
			},

		})
	</script>
	<style type="text/css">
		#app {
			position: relative;
		}
		
		.contaiiner {
			padding: 2px 2px 60px 2px;
		}

		.title {
			font-weight: 600;
			color: #409eff;
			padding: 10px 0;
			border-bottom: 1px solid #eee;
		}

		.detail {
			position: relative;
		}

		.detail::after {
			position: absolute;
			content: '';
			width: 66px;
			left: 0;
			bottom: 0;
			border-bottom: 2px solid #409eff;
		}

		.formF>div {
			padding-top: 10px;
		}

		.formF-radio {
			height: 40px;
			line-height: 40px;
		}

		/* 商品明细 */
		.main {
			padding-top: 10px;
		}

		.card {
			border: 1px solid #eee;
			border-radius: 20px;
			padding: 10px;
			box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .1);
			margin-top: 10px;
		}

		.card-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
		}

		.contents {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(1, 80px 1fr);
		}

		.contents span {
			height: 40px;
			line-height: 40px;
			/* text-align: right; */
		}
		
		.contents span:nth-child(1) {
			color: #95989e;
		}

		/* 底部合计 */
		.bottom-box{
			position: fixed;
			background-color: #fff;
			bottom: 0;
			width: 100%;
		}
		
		.bottom {
			padding: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.bottom div:nth-child(1) span:nth-child(2){
			font-size: 22px;
		}
		
		.bottom div:nth-child(1) span:nth-child(3){
			font-size: 12px;
		}

		.btns {
			display: flex;
			justify-content: end;
		}

		.btn {
			background-color: #409eff;
			color: #fff;
			margin-right: 10px;
			padding: 10px 26px;
			border: none;
			border-radius: 4px;
		}
		
		.btn.cancel{
			background-color: #fff;
			color: #000;
			border: 1px solid #95989e;
		}
	</style>
</html>
